<template>
  <div class="showdata">
    <div class="pic" :style="{'background-image':'url('+img.src+')'}"><div class="percent" :style="{'color':img.color}">{{per.value}}%</div></div>
    <div class="ip">{{per.name}}</div>
     <!-- <div class="pic" :style="{'background-image':'url('+img.src+')'}"><div class="percent" :style="{'color':img.color}">{{per[1]}}%</div></div> -->
    <!-- <div class="ip">{{per[0]}}</div> -->
  </div>
</template>

<script>
export default {
    props:{
        per:{
            type:Object,
            default:function(){
                return{value:"",name:""}
            }
        },
    },
    computed: {
        // eslint-disable-next-line vue/return-in-computed-property
        img() {
            if (this.per.value <= 25) {
                let x={
                    color:"#07daf9",
                    src:require("../assets/icons/cpu_blue.png")
                };
                return x
            }else if(this.per.value > 25&&this.per.value <= 50){
                let x={
                    color:"#ece12d",
                    src:require("../assets/icons/cpu_yellow.png")
                };
                return x
            }else if(this.per.value > 50&&this.per.value <= 75){
                let x={
                    color:"#ffb424",
                    src:require("../assets/icons/cpu_orange.png")
                };
                return x
            }else if(this.per.value > 75){
                let x={
                    color:"#ff131d",
                    src:require("../assets/icons/cpu_red.png")
                };
                return x
            }
        }
    }

}
</script>

<style lang="less" scoped>
@import url("../base.css");
.showdata {
    .pic{
        margin: 0 auto;
        display: grid;
        place-items: center;
        // background-image: url('../assets/icons/cpu_blue.png');//
        background-repeat: no-repeat;
        width: 68px;//
        height: 68px;//
        .percent{
            color: #07daf9;
            font-size: 16px;
        }
    }
}

</style>